<!--
 * @Author: '周云芳‘ '164591357@qq.com'
 * @Date: 2022-08-14 12:48:56
 * @LastEditors: 周云芳 164591357@qq.com
 * @LastEditTime: 2022-08-15 09:22:42
 * @FilePath: \特效花卉\circle.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>画圆</title>
    <style>
        canvas {
            background-color: #ddd;
        }
    </style>
</head>

<body>
    <canvas></canvas>
    <script>
        let oC, cxt;
        function init () {
            oC = document.querySelector('canvas')
            // 设置宽高
            oC.width = window.innerWidth
            oC.height = window.innerHeight
            cxt = oC.getContext('2d')
        }
        init()
        let x = oC.width / 2//让圆在中心页面
        let y = oC.height / 2 - 200
        let radius = 20
        let angle = 0//设置一个角度让其为开始的位置
        let stop = false
        function draw () {//画圆
            if (stop) return
            cxt.beginPath()
            // cos 方法返回一个 -1 到 1 之间的数值，表示角度（单位：弧度）的余弦值。
            x += Math.cos(angle) * radius//每次调用时画就会以radius的半径延伸再画一个
            // sin 方法返回一个 -1 到 1 之间的数值，表示给定角度（单位：弧度）的正弦值。
            y += Math.sin(angle) * radius  //每次调用时画就会以radius的半径Y轴延伸再画一个
            cxt.fillStyle = `hsl(${Math.floor(Math.random() * 360)},70%,60%)`//一个彩色的样式360度的一个随机整数，70%百分比和60%的高度
            cxt.arc(x, y, radius * 0.5, 0, 2 * Math.PI)
            cxt.stroke()
            cxt.fill()//颜色填充
            angle += 0.1 //角度每次加0.1画成五个大圆形
            if (angle >= Math.PI * 2) {
                stop = true
            }
            // radius -= 0.1
            // if (radius <= 0) {
            //     stop = true
            // }

        }
        function play () {
            draw()
            window.requestAnimationFrame(play)
        }
        play()
    </script>
</body>

</html>